<%--jsp文件头--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <title>家居网购</title>
    <!--    写base标签，永远固定相对路径跳转的结果-->
    <!--    直接找到web路径-->
    <%--<base href="http://localhost:8080/jiaju_mall/">--%>
    <base href="<%=request.getContextPath() + "/"%>">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css"/>
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css"/>
    <link rel="stylesheet" href="assets/css/style.min.css"/>
    <!--    先使用临时方案，相对路径 crtl+home 回到页面最上面-->
    <!--    引入juqery-->
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {//页面加载完毕后执行
            //验证注册时的用户名是否存在
            //用户名输入框绑定blur,失去焦点
            $("#username").blur(function () {

                //获取用户注册输入的用户名
                var username = this.value;
                //发出ajax请求
                //  $.getJSON("memberServlet","action=isExistUserName&username="+username,
                //      function (data) {
                //         console.log("data=",data);
                //  })

                //相当于发送的ajax请求，携带的数据是通过json对象放入

                $.getJSON("memberServlet", {
                    "action" : "isExistUserName",
                    "username" : username
                },
                function (data) {
                    //console.log("data=", data);
                    //控制台内容 data= {isExist: false}
                    if (data.isExist){
                        $("span.errorMsg").text("用户名已经存在");
                    }else {
                        //最新bug解决，修改当用户名为空时，显示用户名可用，
                        // 因为空也没有和数据库里的用户名相同
                        if ( $("#username").val() != ""){
                            $("span.errorMsg").text("用户名可用");
                        }

                    }

                })

            })

            //判断验证码是否正确
            $("#code").blur(function () {
                //拿到验证码输入框的内容
                var code = this.value;

                //相当于发送的ajax请求，携带的数据是通过json对象放入

                $.getJSON("memberServlet", {
                        "action" : "isCorrectCode"
                    },
                    function (data) {
                        //console.log("data=", data);
                        //data= {token: '5gg24'}
                        if (data.token == code){
                            $("span.errorMsg").text("验证码正确");
                        }else {
                            $("span.errorMsg").text("验证码错误");
                        }

                    })

            })

            //决定是显示登录还是注册tab “” 不能少
            //如果注册失败，显示注册tab , 而不是默认的登录tab, 增加该代码
            if ("${requestScope.active}" == "register") {
                $("#register_tab")[0].click();//模拟点击
            }

            //对验证码进行绑定事件，可以获得新的验证码
            $("#codeImg").click(function () {
                //先死后活
                //有些浏览器在url没有变化时候，图片不会发出新的请求
                //为了防止不请求，不刷新, 可以携带一个变化参数
                // this.src="http://localhost:8080/jiaju_mall/kaptchaServlet?d=" + new Date();
                this.src = "<%=request.getContextPath()%>/kaptchaServlet?d=" + new Date();
            })

            //绑定点击事件
            $("#sub-btn").click(function () {

                //获取到输入的用户名
                var usernameVal = $("#username").val();
                //alert("usernameVal=" + usernameVal);

                //编写正则表达式验证 会员注册 输入的内容
                var usernamePatten = /^\w{6,10}$/;
                if (!usernamePatten.test(usernameVal)) {
                    //属性过滤器
                    $("span[class='errorMsg']").text("用户名格式错误，要求6-10字符");
                    return false;//不提交
                }

                //获取到输入的密码
                var passwordVal = $("#password").val();
                //编写正则表达式验证 密码 输入的内容
                var passwordPatten = /^\w{6,10}$/;
                if (!passwordPatten.test(passwordVal)) {
                    //基本过滤器
                    $("span.errorMsg").text("密码格式错误，要求6-10字符");
                    return false;//不提交
                }

                //两次密码相同
                var repwdVal = $("#repwd").val();
                if (repwdVal != passwordVal) {
                    $("span.errorMsg").text("输入的两次密码不相等");
                    return false;
                }

                //验证邮箱
                var emailVal = $("#email").val();
                //编写正则表达式验证 邮件 输入的内容
                //老师说明 在java中，正则表达式的转义是\\, 在js 正则表达式 转义是\
                var emailPatten = /^[\w-]+@([a-zA-Z]+\.)+[a-zA-Z]+$/;
                if (!emailPatten.test(emailVal)) {
                    $("span.errorMsg").text("输入邮箱格式不正确");
                    return false;
                }

                //验证码不能为空
                var codeText = $("#code").val();
                //去掉输入验证码两端空格
                codeText = $.trim(codeText);
                if (codeText == null || codeText == "") {
                    $("span.errorMsg").text("验证码不能为空");
                    return false;
                }

                //全部合格·
                //$("span.errorMsg").text("验证通过");
                //写了后台，验证通过就提交给后台
                return true;

            })
        })
    </script>
</head>

<body>
<!-- Header Area start  -->
<div class="header section">
    <!-- Header Top Message Start -->
    <!-- Header Top  End -->
    <!-- Header Bottom  Start -->
    <div class="header-bottom d-none d-lg-block">
        <div class="container position-relative">
            <div class="row align-self-center">
                <!-- Header Logo Start -->
                <div class="col-auto align-self-center">
                    <div class="header-logo">
                        <a href="index.jsp"><img src="assets/images/logo/logo.png" alt="Site Logo"/></a>
                    </div>
                </div>
                <!-- Header Logo End -->

            </div>
        </div>
    </div>
    <!-- Header Bottom  Start 手机端的header -->
    <div class="header-bottom d-lg-none sticky-nav bg-white">
        <div class="container position-relative">
            <div class="row align-self-center">
                <!-- Header Logo Start -->
                <div class="col-auto align-self-center">
                    <div class="header-logo">
                        <a href="index.jsp"><img width="280px" src="assets/images/logo/logo.png" alt="Site Logo"/></a>
                    </div>
                </div>
                <!-- Header Logo End -->
            </div>
        </div>
    </div>
    <!-- Main Menu Start -->
    <div style="width: 100%;height: 50px;background-color: black"></div>
    <!-- Main Menu End -->
</div>
<!-- Header Area End  -->
<!-- login area start -->
<div class="login-register-area pt-70px pb-100px">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-md-12 ml-auto mr-auto">
                <div class="login-register-wrapper">
                    <div class="login-register-tab-list nav">
                        <a class="active" data-bs-toggle="tab" href="#lg1">
                            <h4>会员登录</h4>
                        </a>
                        <a id="register_tab" data-bs-toggle="tab" href="#lg2">
                            <h4>会员注册</h4>
                        </a>
                    </div>
                    <div class="tab-content">
                        <div id="lg1" class="tab-pane active">
                            <div class="login-form-container">
                                <div class="login-register-form">
                                    <%--提示错误信息--%>
                                    <span style="float: right; font-weight: bold; font-size: 20pt; margin-left: 10px;">
                                        ${requestScope.msg}
                                    </span>
                                    <form action="memberServlet" method="post">
                                        <input type="hidden" name="action" value="login"/>
                                        <input type="text" name="username" value="${requestScope.get("username")}"
                                               placeholder="Username"/>
                                        <input type="password" name="password" placeholder="Password"/>
                                        <div class="button-box">
                                            <div class="login-toggle-btn">
                                                <input type="checkbox"/>
                                                <a class="flote-none" href="javascript:void(0)">Remember me</a>
                                                <a href="">Forgot Password?</a>
                                            </div>
                                            <button type="submit"><span>Login</span></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div id="lg2" class="tab-pane">
                            <div class="login-form-container">
                                <div class="login-register-form">
                                    <%--提示错误信息--%>
                                    <span class="errorMsg"
                                          style="float: right; font-weight: bold; font-size: 20pt; margin-left: 10px;">
                                        ${requestScope.msg}
                                    </span>
                                    <form action="memberServlet" method="post">
                                        <input type="hidden" name="action" value="register"/>
                                        <input type="text" id="username" name="username"
                                               value="${requestScope.username}" placeholder="Username"/>
                                        <input type="password" id="password" name="password"
                                               value="${requestScope.password}" placeholder="输入密码"/>
                                        <input type="password" id="repwd" name="repassword"
                                               value="${requestScope.repassword}" placeholder="确认密码"/>
                                        <input name="email" id="email" value="${requestScope.email}" placeholder="电子邮件"
                                               type="email"/>
                                        <input type="text" id="code" name="code" style="width: 50%"
                                               placeholder="验证码"/>　　<img id="codeImg" alt="" src="kaptchaServlet"
                                                                         style="width: 120px;height: 50px">
                                        <div class="button-box">
                                            <button type="submit" id="sub-btn"><span>会员注册</span></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- login area end -->

<!-- Footer Area Start -->
<div class="footer-area">
    <div class="footer-container">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <!-- Start single blog -->
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-sm-6 col-lg-3 mb-md-30px mb-lm-30px" data-aos="fade-up"
                         data-aos-delay="400">
                        <div class="single-wedge">
                            <h4 class="footer-herading">信息</h4>
                            <div class="footer-links">
                                <div class="footer-row">
                                    <ul class="align-items-center">
                                        <li class="li"><a class="single-link" href="about.html">关于我们</a></li>
                                        <li class="li"><a class="single-link" href="#">交货信息</a></li>
                                        <li class="li"><a class="single-link" href="privacy-policy.html">隐私与政策</a></li>
                                        <li class="li"><a class="single-link" href="#">条款和条件</a></li>
                                        <li class="li"><a class="single-link" href="#">制造</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-lg-2 col-sm-6 mb-lm-30px" data-aos="fade-up" data-aos-delay="600">
                        <div class="single-wedge">
                            <h4 class="footer-herading">我的账号</h4>
                            <div class="footer-links">
                                <div class="footer-row">
                                    <ul class="align-items-center">
                                        <li class="li"><a class="single-link" href="my-account.html">我的账号</a>
                                        </li>
                                        <li class="li"><a class="single-link" href="cart.html">我的购物车</a></li>
                                        <li class="li"><a class="single-link" href="login.jsp">登录</a></li>
                                        <li class="li"><a class="single-link" href="wishlist.html">感兴趣的</a></li>
                                        <li class="li"><a class="single-link" href="checkout.html">结账</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="800">

                    </div>
                    <!-- End single blog -->
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row flex-sm-row-reverse">
                    <div class="col-md-6 text-right">
                        <div class="payment-link">
                            <%--会到首页，请求.CustomerFurnServlet.pageByName--%>
                            <%--<img src="#" alt="">--%>
                        </div>
                    </div>
                    <div class="col-md-6 text-left">
                        <p class="copy-text">Copyright &copy; 2021 韩顺平教育~</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Footer Area End -->
<script src="assets/js/vendor/vendor.min.js"></script>
<script src="assets/js/plugins/plugins.min.js"></script>
<!-- Main Js -->
<script src="assets/js/main.js"></script>
</body>
</html>